Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WIP: Responsive map #155

Draft
wants to merge 6 commits into
base: master
Choose a base branch
from
Draft

Conversation

martikaljuve
Copy link
Contributor

Hey.

I experimented with an approach to add responsiveness to the Map + Path canvas. This PR does a few things:

  • Splits map and path drawing into separate functions from drawMap()
  • Adds a config.full_width boolean that makes the Map take up the full width of the container card.

Some of the changes when config.full_width is set to true:

  • div#lovelaceValetudoCard hard-coded width and height are reset with style.width="auto" and style.height="auto".
  • div#lovelaceValetudoCard aspect ratio is set to mapWidth / mapHeight.
  • drawnMapCanvas.style.width and pathCanvas.style.width is set to 100% to fill the whole container.
  • A ResizeObserver listens to container size changes. Inside the callback:
    • dock/vacuum/goToTarget icon left/top pixel positions are replaced with percentages.
    • dock/vacuum/goToTarget icons are scaled based on the container width.
    • CanvasRenderingContext2D: scale() is used to scale everything inside the canvas.
    • map + path canvas are redrawn.

This is still work-in-progress (I only tested with a static map), but asking for feedback about this approach!

@martikaljuve martikaljuve marked this pull request as draft November 27, 2024 13:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant